<template>
  <div class="dashboard-editor-container">
    <!-- 运行情况  统计图 -->
    <panel-group  />

    <!-- 折线图 -->
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'

const lineChartData = {
  newVisitis: { // 折线数据
    expectedData: [],
    timeData: [],
    legendData: ''
  }
}

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    LineChart
  },
  mounted () {
    this.load()
  },
  data () {
    return {
      lineChartData: lineChartData.newVisitis,
      arryList1: [],
      arryList2: []
    }
  },
  methods: {
    handleSetLineChartData (type) {
      this.lineChartData = lineChartData[type]
    },
    load () { //
      var _this = this
      this.$axios.get('/admin/findDataAnalysisTwo').then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.fromDataLine = resp.data.result
          _this.fromDataLine.forEach((element, i) => {
            _this.arryList1.push(element[0])
            _this.arryList2.push(element[1])
          })
          lineChartData.newVisitis.expectedData = _this.arryList1
          lineChartData.newVisitis.timeData = _this.arryList2
          lineChartData.newVisitis.legendData = '最近七天机构课程售出数量折线图'
          _this.lineChartData = lineChartData.newVisitis
        } else {
          // 从后端返回错误信息
            this.$alert('<p style=" color:#F00;">' + resp.data.message + '</p>', '错误提示', {
              dangerouslyUseHTMLString: true
            })
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: #f6f6f6;
  position: relative;
  margin: -20px 0 0 -10px;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
